<template>
  <div class="login">
    <div class="form">
      <div class="title">欢迎登录 远程影像诊断系统</div>
      <div class="container">
        <el-form :model="form" ref="formRef" :rules="rules">
          <el-form-item prop="loginName">
            <el-input
              v-model="form.username"
              class="form_input"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item prop="loginPwd">
            <img alt="" style="margin-right: 10px" />
            <el-input
              type="password"
              v-model="form.password"
              class="form_input"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-button type="primary" @click="submit">登 录 v0.0.1</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { login } from "@/api/index.js";
import { encryptSM2 } from "@/utils/sm2.js";
import usePatientInformation from "@/store/usePatientInformation.js";
const PatientInformation = usePatientInformation();
const router = useRouter();
const rules = {
  username: [{ required: true, message: "请正确填写用户名", trigger: "blur" }],
  password: [{ required: true, message: "请正确填写密码", trigger: "blur" }],
  captcha: [{ required: true, message: "请正确填写验证码", trigger: "blur" }],
};
const formRef = ref(null);
const form = reactive({
  username: "",
  password: "",
});

const submit = () => {
  login({
    username: form.username,
    password: form.password,
  }).then((res) => {
    console.log(res, "333");
    if (res) {
      localStorage.setItem("user", JSON.stringify(res));
      PatientInformation.usermsg = res;
      ElMessage({
        message: "登录成功",
        type: "success",
      });
      router.push("/patientCard");
    } else {
      ElMessage({
        message: "登录失败,请检查用户名或密码！",
        type: "error",
      });
    }
  });
};
</script>
<style scoped lang="scss">
.login {
  height: 100vh;
  background-image: url("@/assets/login_bg.png");
  position: relative;
  .form {
    position: absolute;
    right: 300px;
    top: 30%;

    .title {
      color: #079284;
      font-family: "Alibaba PuHuiTi 2.0";
      font-size: 28px;
      font-style: normal;
      font-weight: 900;
      line-height: 28px; /* 100% */
    }
    .el-form {
      margin-top: 30px;
    }
  }
}
</style>
